<template>
  <div class="goodsSell">
    <el-card>
      <template #header>
        <el-icon><Sell /></el-icon>
        <span>商品促销信息</span>
      </template>
      <template #default>
        <el-form class="custom_form" ref="formRef" :model="form" :rules="rules" size="large" label-width="230">
          <el-form-item label="促销类型" prop="promoType">
            <el-radio-group v-model="form.promoType" @change="promoTypeChange">
              <el-radio-button :label="0">无促销</el-radio-button>
              <el-radio-button :label="1">促销</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.promoType === 1" label="促销数量" prop="promoLimit" required>
            <el-input v-model="form.promoLimit" type="number" placeholder="请输入促销数量" clearable class="input-w"></el-input>
          </el-form-item>
          <el-form-item v-if="form.promoType === 1" label="促销优惠额度" prop="promoPrice" required>
            <el-input v-model="form.promoPrice" type="number" placeholder="请输入促销优惠额度" clearable class="input-w"></el-input>
          </el-form-item>
          <el-form-item v-if="form.promoType === 1" label="活动时间" prop="dateTime" required>
            <div>
              <el-date-picker 
                v-model="form.dateTime" 
                type="datetimerange" 
                range-separator="至" 
                value-format="YYYY-MM-DD HH:mm:ss"
                start-placeholder="开始日期" 
                end-placeholder="结束日期"/>
            </div>
          </el-form-item>
        </el-form>
        <div class="btns">
          <el-button size="large" @click="doClose">返回</el-button>
          <el-button type="primary" size="large" @click="doPrevStep">上一步</el-button>
          <el-button type="primary" size="large" @click="doSubmit">保存</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup name="goodsSell">
  import { 
    // saveOrUpdateGoodsPromoInfoApi, 
    // getGoodsPromoInfoApi 
  } from '@/api/api'
  import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
  import { useStore } from 'vuex' 

  const store = useStore()

  const currentThis = getCurrentInstance().appContext.config.globalProperties
  const formRef = ref(null)
  const emits = defineEmits(['prevStep', 'close'])
  defineExpose({init}) // 抛出组件方法供父组件使用
  
  const  currentData = reactive({
    form: {
      productId: '',
      promoType: 0,
      promoLimit: '',
      promoPrice: '',
      promoStartTime: '',
      promoEndTime: '',
      dateTime: []
    },
    rules: {
      promoLimit: [{ required: true, message: '请输入促销数量', trigger: 'blur' }],
      promoPrice: [{ required: true, message: '请输入促销优惠额度', trigger: 'blur' }],
      dateTime: [{ required: true, message: '请选择活动时间', trigger: 'blur' }],
    }
  })
  let {form, rules} = toRefs(currentData)

  // 初始化数据
  function init() {
    // currentData.form.productId = store.state.productId
    // if(currentData.form.productId) {
    //   getGoodsPromoInfoApi(currentData.form.productId).then(res => {
    //     if(res.code === '200') {
    //       currentData.form.promoType = res.data.promoType
    //       currentData.form.promoLimit = res.data.promoLimit
    //       currentData.form.promoPrice = res.data.promoPrice
    //       currentData.form.promoStartTime = res.data.promoStartTime
    //       currentData.form.promoEndTime = res.data.promoEndTime
    //       if(currentData.form.promoStartTime && currentData.form.promoEndTime) {
    //         currentData.form.dateTime = [currentData.form.promoStartTime, currentData.form.promoEndTime]
    //       } else {
    //         currentData.form.dateTime = []
    //       }
    //     }
    //   })
    // }
  }

  // 保存
  function doSubmit() {
    // formRef.value.validate((valid) => {
    //   if(valid) {
    //     currentThis.$messageBox.confirm('确认保存吗？').then(() => {
    //       let loading = currentThis.$loading('正在保存，请耐心等待')
    //       currentData.form.promoStartTime = currentData.form.dateTime[0]
    //       currentData.form.promoEndTime = currentData.form.dateTime[1]
    //       saveOrUpdateGoodsPromoInfoApi(currentData.form).then(res => {
    //         loading.close()
    //         if(res.code === '200') {
    //           currentThis.$message.success('保存成功')
    //           doClose()
    //         } else {
    //           currentThis.$message.error(res.message)
    //         }
    //       })
    //     }).catch(() => {})
    //   }
    // })
  }

  // 关闭
  function doClose() {
    emits('close')
  } 

  // 上一步
  function doPrevStep() {
    emits('prevStep')
  }

  function promoTypeChange(e) {
    if(!e) {
      currentData.form.promoLimit = ''
      currentData.form.promoPrice = ''
      currentData.form.promoStartTime = ''
      currentData.form.promoEndTime = ''
      currentData.form.dateTime = []
      formRef.value.resetFields()
    }
  }
</script>

<style lang="less" scoped>
.goodsSell{
  :deep(.el-card){
    margin-bottom: 15px;
    .el-card__header{
      display: flex;
      align-items: center;
      .el-icon{
        margin-right: 5px;
      }
    }
    .el-card__body{
      padding: 40px 40px 20px 0;
      .input-w{
        width: 250px;
      }
      .btns{
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>